<template>
	<view class="page">
		<!-- tabs -->
		<up-sticky bgColor="#fff">
			<up-tabs class="tab" :list="list1" lineWidth="24" lineColor="#D19973" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="click">
			</up-tabs>
		</up-sticky>
		<!-- content -->
		<view class="coupon-list">
			<view v-if="coupons.list.length">
				<view class="coupon" v-for="(item, index) of coupons.list" :key="index">
					<view class="coupon-status" :class="{'active0': activeTab === 0, 'active1': activeTab === 1, 'active2': activeTab === 2}" v-if="activeTab !== 0">
						<span v-if="activeTab === 0">未使用</span>
						<span v-if="activeTab === 2">已使用</span>
						<span v-if="activeTab === 1">已过期</span>
					</view>
					<view class="coupon-info">
						<view class="coupon-left">
							<text class="count">{{ item.subMoney }}</text>
							<text class="unit">{{ item.type === 1 ? '元' : '折' }}</text>
						</view>
						<view class="coupon-right">
							<view class="name">{{ item.name }}</view>
							<view class="time">{{ `共${item.totalNum}张、` }}
								<span v-if="item.personLimited">{{ `每人限领${item.personNum}张` }}</span>
							</view>
						</view>
					</view>
					<up-divider :dashed="true"></up-divider>
					<view class="coupon-desc">{{ item.remark }}</view>
				</view>
				<up-loadmore status="nomore" nomore-text="没有更多了" fontSize="12" color="#909399" />
			</view>
			<up-empty mode="coupon" iconColor="#EBEEF5" marginTop="100" v-else></up-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 获取token
	const token = ref(null)
	onLoad((option) => {
		token.value = uni.getStorageSync('token')
		getMyCoupon(0)
	})

	const activeTab = ref(0)
	// 创建响应式数据  
	const list1 = reactive([
		{
			name: '未使用',
			value: 0
		},
		{
			name: '已使用',
			value: 1
		},
		{
			name: '已过期',
			value: 2
		}
	]);

	// 定义方法  
	function click(item) {
		activeTab.value = item.value
		coupons.list = []
		if (item.value === 0) {
			// 未使用
			getMyCoupon(0)
		}
		if (item.value === 1) {
			// 已使用
			getMyCoupon(1)
		}
		if (item.value === 2) {
			// 已过期
			getMyCoupon(2)
		}
	}

	// 优惠券
	const coupons = reactive({
		list: [],
	})

	// 获取待领取优惠券
	function getCouponTask() {
		uni.showLoading()
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/coupons/to/take/list`,
			method: 'GET',
			header: {
				'Authorization': "Bearer " + token.value,
			},
			data: {
				pageNum: 1,
				pageSize: 9999
			},
			success: (res) => {
				if (res.data.code === 200) {
					coupons.list = res.data.rows
					uni.hideLoading()
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}

	// 领取优惠券
	function handleCollect(uuid) {
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/coupons/task/${uuid}`,
			method: 'GET',
			header: {
				'Authorization': "Bearer " + token.value,
			},
			success: (res) => {
				if (res.data.code === 200) {
					uni.showToast({
						icon: 'none',
						title: '已领取'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}

	// 获取我的优惠券--未使用(0)、已使用(1)、已过期(2)
	// 获取待领取优惠券
	function getMyCoupon(status) {
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/coupons/my`,
			method: 'GET',
			header: {
				'Authorization': "Bearer " + token.value,
			},
			data: {
				status,
				pageNum: 1,
				pageSize: 9999
			},
			success: (res) => {
				if (res.data.code === 200) {
					coupons.list = res.data.rows
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.tab {
		padding: 20rpx;
	}

	.btn {
		width: 400rpx;
		position: fixed;
		left: 50%;
		bottom: 80rpx;
		margin-left: -200rpx;
	}

	.coupon-list {
		padding: 20rpx 30rpx;

		.coupon {
			border-radius: 12rpx;
			box-shadow: 0 0 4px rgba(0, 0, 0, .1);
			margin-bottom: 30rpx;
			position: relative;
			overflow: hidden;

			.collect-btn {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}

			.coupon-status {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				font-size: 12px;
				color: #D19973;
				transform: rotate(45deg);
				width: 120rpx;
				height: 120rpx;
				border-radius: 60%;
				border: 1px solid #D19973;
				text-align: center;
				line-height: 120rpx;
				&.active0 {
					color: #409EFF;
					border-color: #409EFF;
				}
				&.active1 {
					color: #f4f4f5;
					border-color: #f4f4f5;
				}
				&.active2 {
					color: #F56C6C;
					border-color: #F56C6C;
				}
			}

			.coupon-info {
				overflow: hidden;
				padding: 30rpx 20rpx 0;

				.coupon-left {
					float: left;
					width: 200rpx;
					text-align: center;
					color: #D19973;

					.count {
						font-size: 30px;
						margin-right: 8rpx;
						font-weight: 500;
					}

					.unit {
						font-size: 12px;
					}
				}

				.coupon-right {
					float: left;

					.name {
						font-size: 14px;
						font-weight: 600;
						margin-bottom: 20rpx;
					}

					.time {
						font-size: 12px;
					}
				}
			}

			.coupon-desc {
				padding: 0 20rpx 30rpx;
				font-size: 12px;
			}
		}
	}

	.u-divider {
		margin: 20rpx 0 !important;
	}
</style>